<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>$!{advisorCoupon.productCouponName}</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!-- 初始化 -->
	<link rel="stylesheet" type="text/css" href="$!{basePath}/content/system/h5/css/common.css" />
	<script src="$!{basePath}/app/js/vue.min.js"></script>
	<script src="$!{basePath}/app/js/axios.min.js"></script>
	<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<link rel="stylesheet" type="text/css" href="$!{basePath}/content/system/h5/css/mobile-ui1.0-compress.css"/>
	<script src="$!{basePath}/content/system/h5/js/mobile-ui1.0-compress.js" type="text/javascript" charset="utf-8"></script>
	<title></title>
	<style type="text/css">
		.app{
			width: 100%;
			background: url(/content/system/h5/img/bg.png) no-repeat;
			background-size: 100% 100%;
			padding-top: 1px;
			position: static !important;
		}
		.cont{
			width: 78%;
			height: 45%;
			margin: 45% auto 0;
			background: url(/content/system/h5/img/yhj.png) no-repeat;
			background-size: 100% 100%;
			padding-top: 1px;
		}
		.top{
			width: 90%;
			height: 32%;
			background-color: #fff;
			margin: 11% auto 0;
			text-align: center;
			color: red;
			position: relative;
			border-bottom: 2px dashed #F2EADA;
		}
		.num{
			/* display: inline-block; */
			height: 50%;
			line-height: 2;
		}
		.text{
			font-size: 10px;
			/* display: inline-block; */
			height: 40%;
			line-height: 2;
		}
		.yuan1{
			position: absolute;
			width: 20px;
			height: 40px;
			left: 0;
			background-color: red;
			bottom: -20px;
			border-radius: 0 20px 20px 0;
		}
		.yuan2{
			position: absolute;
			width: 20px;
			height: 40px;
			right: 0;
			background-color: red;
			bottom: -20px;
			border-radius:20px 0 0 20px;
		}
		.center{
			height: 28%;
			background-color: #fff;
			width: 90%;
			margin: 0px auto 0;
			text-align: center;
			line-height: 4;
			color: #B82322;
			border-radius: 0 0 50% 50%;
		}
		.bottom{
			width: 90%;
			height: 36px;
			background-color: #FFDF12;
			margin: 15px auto;
			text-align: center;
			border-radius: 30px;
			line-height: 36px;
		}
		.touxiang{
			width: 80px;
			height: 80px;
			position: absolute;
			right: 35px;
			top: 35px;
			border-radius: 50%;
			overflow: hidden;

		}
		.touxiang img{
			width: 100%;
		}
	</style>
</head>
<body>
<!-- <div class="con"> -->
<div class="app">
	<div class="cont">
		<div class="top">
			<div class="num">￥<span style="font-size: 24px;">$!{advisorCoupon.productCouponNumber}</span></div>
			<div class="text">仅适用：$!{advisorCoupon.productCouponName}课程</div>
			<div class="yuan1"></div>
			<div class="yuan2"></div>
		</div>
		<div class="center">
			领取后请及时使用
		</div>
		<div class="bottom" @click="but()">
			<p v-if="!$!{isReceive}">马上领取</p>
			<p v-else>{{text}}</p>
		</div>
		<div class="touxiang">
			<img src="$!{wxInfo.headimgurl}" >
		</div>
	</div>

</div>
<!-- </div> -->
</body>
</html>
<script type="text/javascript">
    var isReceive = "$!{isReceive}";
    var couponId = "$!{advisorCoupon.id}";
    var cusCouponId = "$!{cusCoupon.id}";
	var productId = "$!{advisorCoupon.productId}";
	var h=document.documentElement.clientHeight;
	var dom=document.getElementsByClassName("app")[0];
	dom.style.height=h+"px"
	var shareUrl = window.location.href;
	wx.config({
		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		appId: '$!{appId}', // 必填，公众号的唯一标识
		timestamp: "$!{wx.timestamp}", // 必填，生成签名的时间戳
		nonceStr: "$!{wx.nonceStr}", // 必填，生成签名的随机串
		signature: "$!{wx.signature}",// 必填，签名，见附录1
		jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	});
	wx.ready(function(){
		var shareData = {
			title: '$!{advisorCoupon.productCouponName}', // 分享标题
			desc: '$!{advisorCoupon.productCouponRemark}', // 分享描述
			link: shareUrl, // 分享链接
			imgUrl: 'http://www.gysc1808.com/profile/coupon/coupon.png', // 分享图标
		};
		wx.onMenuShareTimeline(shareData);
		wx.onMenuShareAppMessage(shareData);
		wx.onMenuShareQQ(shareData);
		// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
		// 则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
	});
	wx.error(function(res){
		//alert("==============error" + res)
	});

	new Vue({
		el:".app",
		data:{
			src:"",
			text:"",
			timer:null
		},
		mounted(){
			if(isReceive){
				var index=5
				this.timer=setInterval(()=>{
					index--
					this.text="领取成功，即将跳转"+index;
					if(index==0){
						window.location.href="$!{basePath}/app/product/prop/introduce.do?id=" + productId + "&couponId=" + cusCouponId;
						clearInterval(this.timer)
					}
				},1000)
			}
		},
		methods:{
			but(){
                if(isReceive == 'false') {
                    //未领取优惠卡
                    axios({
                        url:  "$!{basePath}/system/back/poster/cusCoupon/doAdd.do",
                        method:"get",
						params:{
							advCouponId: couponId
						}
                    }).then((res)=>{
                    	if(res.data.success) {
                    		var index=5
							this.timer=setInterval(()=>{
								index--
								this.text="领取成功，即将跳转"+index;
								if(index==0){
									window.location.href="$!{basePath}/app/product/prop/introduce.do?id=" + productId + "&couponId=" + cusCouponId;
									clearInterval(this.timer)
								}
							},1000)
							location.reload();
						} else {
                    		alert(res.data.msg);
						}
                    })
                } else {
					window.location.href="$!{basePath}/app/product/prop/introduce.do?id=" + productId + "&couponId=" + cusCouponId;
                }
			}
		}
	})
</script>